<template>
    <view class="top_big">
        <view style="background-color: #fff;position: fixed;top: 0;left: 0;right: 0;z-index: 999;">
            <uni-status-bar></uni-status-bar>
            <view class="topshopp">
                <text>购物车</text>
            </view>
        </view>
        <!-- <uni-status-bar></uni-status-bar> -->
        <!-- <tabBar :currentIndex="2"></tabBar> -->
        
        <!-- 1、顶部 -->
        <view class="header" style="margin-top: 200rpx;" v-if="list.length <= 0">
            <view class="cart_icon">
                <image src="../../static/icon/no-gwc@3x.png"></image>
            </view>
            <view class="font_message">
                <text>您的购物车还是空的，赶紧去添加商品吧</text>
                <button @click="indexClick">去添加</button>
            </view>
        </view>
        
        <!-- 待购物信息 -->
        <view class="for_shopping" style="margin-top: 200rpx;" v-else>
            <!-- 头部 -->
            <view class="font_item">
                <text>待购买</text>
                <view class="font_numer" @click="emptyCart()">
                    <image src="../../static/icon/fc-delete@3x.png"></image>
                    <text>清空</text>
                </view>
            </view>
            <!-- 主体 -->
            <view class="shopping_list" v-for="(item,index) in list" :key="index">
                <checkbox-group checked class="pitchOn" @click="handChecked(item)">
                    <checkbox :value="item.products.price" :checked="item.is_select" />
                </checkbox-group>
                <!-- <button class="pitchOn"></button> -->
                <view class="list_item">
                    <view class="list_icon">
                        <image :src="item.products.image_path"></image>
                    </view>
                    <view class="list_font">
                        <text>{{item.products.name}}</text>
                        <text class="unmber">￥{{item.products.price}}</text>
                        <view class="sum">
                            <u-number-box v-model="item.nums" @change="valChange" :index="index" :min="1"></u-number-box>
                        </view>
                    </view>
                </view>
            </view>
            
        </view>
        
        <!-- 已失效信息 -->
        <!-- <view class="for_shopping"> -->
            <!-- 头部 -->
            <!-- <view class="font_item">
                <text>已失效</text>
                <view class="font_numer">
                    <image src="../../static/icon/fc-delete@3x.png"></image>
                    <text>清空</text>
                </view>
            </view> -->
            <!-- 主体 -->
            <!-- <view class="shopping_list" style="filter: grayscale(100%);"> filter黑白滤镜 --> 
            <!--     <button class="pitchOn"></button>
                <view class="list_item">
                    <view class="list_icon">
                        <image src="../../static/fruits/juzhi.jpeg"></image>
                    </view>
                    <view class="list_font">
                        <text>广西自产超甜沃柑 每盒1.5kg装</text>
                        <text class="unmber">￥36.9</text>
                        <view class="sum">
                            <button @tap="sub()">-</button><h3>{{counter}}</h3><button @tap="add()">+</button>
                        </view>
                    </view>
                </view>
            </view>
        </view> -->
        
        <!--2、底部 -->
        <view class="bottom">
            <!-- 主体标题 -->
            <view class="title">
                <text>为您推荐</text>
            </view>
            <view class="phone_body" v-for="(item, index) in productList" @click="toProductDetails(item.id)" :key="item.id">
                <view class="phoneicon_img">
                    <view class="phone_img">
                        <image :src="item.image_url"></image>
                    </view>
                    <view class="phone_font">
                        <text>{{item.name}}</text>
                        <text class="number">￥{{item.price}}</text>
                    </view>
                </view>
            </view>
        </view>
        <view class="cart_bottom">
            <view class="bottom_item">
                <view class="item_one" @click="handAllChecked">
                    <view class="circle">
                        <u-icon name="checkbox-mark" color="#009300" v-if="allChecked"></u-icon>
                    </view>
                    <text>全选</text>
                </view>
                <view class="item_two">
                <view class="total">共： <text class="unmber">{{totalPrice}}元</text></view>    
                </view>
                <view class="item_three" @click="accountClick()">
                    <text>去结算</text>
                </view>
            </view>
            <view style="height: 115rpx;"></view>
        </view>
        
    </view>
</template>

<script>
    export default{
        data(){
            return{
                list:[],
                checkList: [], //选中值
                allChecked: false, //是否全选
                productList: [],
                ids: [],
            }
        },
        mounted() {
            uni.showLoading({
                title: '加载中'
            });
            this._postGetCartList();
            this._getList();
        },
        computed:{
            //计算选中的商品价格
            totalPrice(){
                var totalPrice = 0;
                this.list.map(item =>{
                    item.is_select ? totalPrice += item.nums * item.products.price : totalPrice+=0
                })
                return parseFloat(totalPrice).toFixed(2);
            }
        },
        methods:{
            emptyCart() {
                let idlist = [];
                let ids = '';
                this.list.forEach((item,index) => {
                    idlist.push(item.id);
                })
                ids = idlist.join(',');
                this._postCartDel(ids);
                // this._postSetnums()
            },
            handAllChecked() {
                if(this.allChecked == false) {
                    this.allChecked = true
                    this.list.forEach(item => {
                        return item.is_select = true
                    })
                } else {
                    this.allChecked = false
                    this.list.forEach(item => {
                        return item.is_select = false
                    })
                }
                let ids = [];
                this.list.forEach(item => {
                    if(item.is_select == true) {
                        this.ids.push(item.id)
                    }
                })
            },
            handChecked(item) {
                if(item.is_select == false) {
                    item.is_select = true
                } else {
                    item.is_select = false
                    this.allChecked = false
                }
                let ids = [];
                this.list.forEach(item => {
                    if(item.is_select == true) {
                        this.ids.push(item.id)
                    }
                })
            },
            valChange(e) {
                this._postSetnums(this.list[e.index].id, e.value)
            },
            // 商品详情
            toProductDetails(id) {
                uni.navigateTo({
                    url:'/shop/pages/product/productDetails?id='+id
                })
            },
            indexClick(){
                uni.navigateTo({
                    url: "/shop/pages/user/Tabindex?show=1"
                })
            },
            accountClick() {
                let id = this.ids.join(',');
                if(this.$u.test.isEmpty(id)) {
                    uni.showToast({
                        title: '没选择任何商品',
                        duration: 2000,
                        icon: 'none'
                    });
                    return;
                }
                uni.navigateTo({
                    url:"/shop/pages/list/accountDemo?id="+id
                })
            },
            // 修改购物车数量api
            _postSetnums(id, nums) {
                this.$u.api.postSetnums({
                     id: id,
                     nums: nums,
                }).then(res => {
                    
                }).catch(err => {
                    
                })
            },
            // 获取购物车api
            _postGetCartList() {
                this.$u.api.postGetCartList({
                     display: 'all'
                }).then(res => {
                    this.list = res.list
                }).catch(err => {
                    
                })
            },
            // 删除购物车api
            _postCartDel(ids) {
                this.$u.api.postCartDel({
                     ids: ids,
                }).then(res => {
                    uni.showToast({
                        title: '清空成功',
                        duration: 1000
                    });
                    this.list = [];
                }).catch(err => {
                    uni.showToast({
                        title: err.msg,
                        duration: 1000
                    });
                })
            },
            // 推荐产品api
            _getList() {
                this.$u.api.getList({
                    page: '1',
                    limit: '4',
                    code: '999',
                    where: {recommend: '1'}
                }).then(res => {
                    this.productList = res.list;
                }).catch(e => {
                })
            },
        }
    }
</script>
<style lang="scss" scoped>
    .top_big{
        background-color:#f7f7f7;
        padding-bottom: calc(var(--window-bottom) + 150px);//内容区域距离底部的距离
    }
    .topshopp{
        font-size: 36rpx;
        color: #191919;
        text-align:center;
        font-weight:bold;
        height: 100rpx;
        line-height: 100rpx;
    }
    .header{
        width: 690rpx;
        height: 469rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0 auto;
        .cart_icon{
            width: 180rpx;
            height: 180rpx;
            background-color: #ffffff;
            box-sizing: border-box;
            align-items: center;
            flex-wrap: wrap;
            margin-top: 50rpx;
            image{
                width: 200rpx;
                height: 160rpx;
            }
        }
        .font_message{
            width: calc(50%-20);
            display: flex;
            margin: 10rpx ;
            justify-content:center;
            flex-wrap: wrap;
            margin-top: -30rpx;
            text{
                font-size: 28rpx;
                line-height: 43rpx;
                color: #666666;
                font-weight:bold;
            }
            button{
                width: 202rpx;
                height: 78rpx;
                background-color: #1bc078;
                border-radius: 39rpx;
                font-size: 32rpx;
                color: #ffffff;
            }
        }
    }

    .bottom{
        width: 700rpx;
        background-color: #ffffff;
        border-radius: 20rpx;
        display: flex;
        flex-wrap: wrap;
        border: 1px solid #f2f2f2;
        margin: 30rpx;
        .title{
            width: 100%;
            height: 35rpx;
            font-size: 36rpx;
            line-height: 34rpx;
            color: #999999;
            text-align: center;
            margin-top: 20rpx;
        }
        .phone_body{
            display: flex;
            width: calc(50% - 20rpx);
            background-color: #ffffff;
            border-radius: 8rpx;
            border: solid 2rpx #f2f2f2;
            box-sizing: border-box;
            flex-wrap: wrap;
            margin: 30rpx 10rpx 20rpx 10rpx;
            .phoneicon_img{
                display: flex;
                align-items: center;
                justify-content: center;//设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式
                flex-wrap: wrap;
                .phone_img{
                    overflow:hidden;
                    height: 245rpx;
                    box-sizing: border-box;
                    align-items:center;
                    margin-top: 20rpx;
                    padding: 20rpx;
                    border-radius: 4rpx;
                    image{
                        width: 253rpx;
                        height: 245rpx;
                    }
                }
                .phone_font{
                    width: 100%;
                    font-weight:bold;
                    justify-content: center;
                    margin: 17rpx 0 10rpx 10rpx;
                    text{
                        display: block;
                        width: 255rpx;
                        height: 32rpx;
                        font-size: 24rpx;
                        line-height: 24rpx;
                        color: #191919;
                        padding-bottom: 10rpx;
                        overflow:hidden;
                        text-overflow:ellipsis;
                        white-space:nowrap;
                    }
                    .number{
                        margin-top: 10rpx;
                        color: red;
                        display: block; //转换成块级元素显示，前后带有换行符
                    }
                }
            }
        }
    }

    .for_shopping{
        background-color: #ffffff;
        margin: 30rpx;
        padding-top: 0;
        padding: 10rpx 0 10rpx 0;
        border-radius: 20rpx;
        .font_item{
            margin: 30rpx;
            height: 50rpx;
            display: flex;
            text-align: center;
            text{
                display: inline-block;/* 不独占一行的块级元素 */
                font-size: 32rpx;
                color: #191919;
                font-weight: bold;
            }
            .font_numer{
                display: flex;
                margin-left: auto;
                image{
                    display: flex;
                    width: 50rpx;
                    height: 50rpx;
                    background-color: #f2f2f2;
                    border-radius:50%;
                    margin-right: 20rpx;
                }
                text{
                    font-size: 28rpx;
                    line-height: 50rpx;
                    color: #999999;
                    
                }
            }
        }
        
        .shopping_list{
            margin: 30rpx;
            background-color: #f7f7f7;
            border-radius: 10rpx;
            display: flex;
            align-items: center;
            margin-top: 30rpx;
            justify-content: center;
            height: auto;
            padding: 20rpx;
            box-sizing: border-box;
            .list_item{
                display: flex;
                margin-left: 20rpx;
                .list_icon{
                    width: 150rpx;
                    height: 150rpx;
                    background-color: #ffffff;
                    border-radius: 10rpx;
                    margin-top: 20rpx;
                    overflow: hidden;
                    image{
                    width: 150rpx;
                    height: 150rpx;
                    }
                }
                
                .list_font{
                    display: flex;
                    flex: 1;
                    margin-left: 20rpx;
                    flex-wrap: wrap;
                    justify-content:flex-start;
                    align-items:center;
                    text{
                        display: inline-block;
                        width: 100%;
                        font-size: 30rpx;
                        color: #191919;
                        font-weight:bold;
                    }
                    .unmber{
                        color: #ff4200;
                        font-size: 24rpx;
                        margin-top: 10rpx;
                    }
                    .sum {
                        margin-top: 20rpx;
                    }
                }
                
            }
        }
    }

    .footer{
        width: 100%;
        display: flex;
        flex-wrap:wrap;
        background-color: #ffffff;
        border: 1px solid #f2f2f2;
        position: fixed; /* 窗口定位*/
        bottom:0;
        justify-content: center;
        align-items: center;
        padding: 20rpx;
        .circle{
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .figure{
            display: inline-block;
            font-size: 32rpx;
            font-weight:bold;
            margin: 0 auto;
            span{
                font-size: 32rpx;
                color: #ff4200;
                flex: 1;
            }
        }
        button{
            width: 229rpx;
            height: 78rpx;
            background-color: #ff4200;
            border-radius: 39rpx;
            font-size: 32rpx;
            color: #ffffff;
            margin-left: auto;
            margin-right: 30rpx;
            
        }
    }
    .cart_bottom{
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            //计算如iPhoneX等手机底部返回横条的安全距离
            padding-bottom: constant(safe-area-inset-bottom);
            padding-bottom: env(safe-area-inset-bottom);
            box-shadow: 0rpx -10rpx 30rpx 0rpx rgba(0, 0, 0, 0.1);
            .bottom_item{
                display: flex;
                width: 100%;
                height: 100rpx;
                align-items: center;
                .item_one{
                    display: flex;
                    justify-content: center;
                    margin-left: 30rpx;
                    .circle{
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        width: 50rpx;
                        height: 50rpx;
                        background-color: #ffffff;
                        border: solid 2rpx #e5e5e5;
                        border-radius: 50%;
                    }
                    text{
                        font-size: 32rpx;
                        color: #999999;
                        text-align:center;
                        margin-left: 20rpx;
                    }
                }
                .item_two{
                    display: flex;
                    margin-left: auto;
                    .total{
                        font-size: 32rpx;
                        color: #191919;
                        font-weight:bold;
                        .unmber{
                            font-size: 32rpx;
                            color: #ff4200;
                        }
                    }
                }
                .item_three{
                    display: flex;
                    width: 202rpx;
                    height: 75rpx;
                    background-color: #ff4200;
                    border-radius: 99px;
                    align-items: center;
                    justify-content: center;
                    margin-left: 50rpx;
                    margin-right: 30rpx;
                }
                text{
                    font-size: 32rpx;
                    color: #ffffff;
                    text-align: center;
                }
            }
        }
</style>